import { CalculatorOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { Typography } from 'antd';
import WaterFlowCalculationPage from './subpages/WaterFlowCalculationPage';
import TopMenu from '../../../components/layout/TopMenu';

const { Title } = Typography;

const SoilWaterConservationPage: React.FC = () => {
  const [currentMenuKey, setCurrentMenuKey] = useState('rainfall-flow');

  // 顶部菜单配置
  const topMenuItems = [
    {
      key: 'rainfall-flow',
      label: '降雨流量计算',
    },
    {
      key: 'soil-water-conservation',
      label: '水土保持',
    }
  ];

  const handleMenuClick = (key: string) => {
    setCurrentMenuKey(key);
  };

  return (
    <div>
      <Title level={2}>
        <CalculatorOutlined /> 水土保持计算
      </Title>
      
      <div style={{ marginBottom: '24px' }}>
        <TopMenu 
          currentKey={currentMenuKey}
          onChange={handleMenuClick}
          items={topMenuItems}
        />
      </div>
      
      {currentMenuKey === 'rainfall-flow' && (
        <WaterFlowCalculationPage />
      )}
      
      {currentMenuKey === 'soil-water-conservation' && (
        <div>水土保持内容</div>
      )}
    </div>
  );
};

export default SoilWaterConservationPage;